<template>
	<view class="lucky-wheel">
		<view class="header">
			<view class="rules-button" @click="rulesShow = true">抽奖规则</view>
			<view class="winning-tips-list">
				<view v-if="userList.length" class="inner acea-row row-center-wrapper">
					<noticeBar :showMsg="userList"></noticeBar>
				</view>
			</view>
			<view class="wheel-container">
				<view class="wheel-panel" :style="{ transform: `rotate(${rotateAngle}deg)` }">
					<view v-for="(item, index) in prizeList" :key="item.id" :style="{ transform: `rotate(${index*360/8}deg) skewY(-45deg)` }" class="item"></view>
				</view>
				<view class="wheel-prize" :style="{ transform: `rotate(${rotateAngle}deg)` }">
					<view v-for="(item, index) in prizeList" :key="item.id" :style="{ transform: `rotate(${(2*index+1)*360/8/2}deg) translateX(-50%)` }" class="item">
						<view class="">{{ item.name }}</view>
						<image :src="item.image" class="image"></image>
					</view>
				</view>
				<view class="wheel-point">
					<view class="draw-button" @click="getWiningIndex"></view>
				</view>
			</view>
			<view class="number-wrapper">你获得 <text class="number">{{ lottery_num }}次</text> 抽奖机会</view>
			<view class="share-button-wrapper">
				<!-- #ifdef H5 -->
				<view v-if="factor = 5" class="share-button acea-row row-center-wrapper" @click="H5ShareBox = true">邀请好友</view>
				<!-- #endif -->
			</view>
		</view>
		<view class="main-wrapper">
			<!-- 中奖记录 -->
			<view v-if="userList.length" class="record-wrapper">
				<view class="wrapper-header acea-row row-center-wrapper">
					<view class="title">中奖记录</view>
				</view>
				<scroll-view scroll-y="true" class="wrapper-main">
					<view v-for="item in userList" :key="item.id" class="item">恭喜 <text class="mark">{{ item.user.nickname }}</text> 获得 <text class="mark">{{ item.prize.name }}</text></view>
				</scroll-view>
			</view>
			<!-- 活动奖品 -->
			<view class="prize-wrapper">
				<view class="wrapper-header">
					<view class="title-box acea-row row-middle">
						<view class="title">活动奖品</view>
					</view>
				</view>
				<view class="wrapper-main">
					<view class="list acea-row">
						<template v-for="item in prizeList">
							<view v-if="item.type != 1" :key="item.id" class="item">
								<view class="image-wrap">
									<image :src="item.image" class="image"></image>
								</view>
								<view class="">{{ item.name }}</view>
							</view>
						</template>
					</view>
				</view>
			</view>
			<!-- 我的奖品 -->
			<view v-if="myList.length" class="prize-wrapper mine">
				<view class="wrapper-header">
					<view class="title-box acea-row row-middle">
						<view class="title">我的奖品</view>
					</view>
				</view>
				<view class="wrapper-main">
					<view class="list">
						<view class="item th acea-row row-middle">
							<view class="mark">序号</view>
							<view class="time">获奖时间</view>
							<view class="">奖品名称</view>
						</view>
						<view v-for="(item, index) in myList" :key="item.id" class="item acea-row row-middle">
							<view class="mark">{{ index + 1 }}</view>
							<view class="time">{{ item.add_time }}</view>
							<view class="">{{ item.prize.name }}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 抽奖规则弹窗 -->
		<view v-if="rulesShow || aleartStatus" class="mask" @touchmove.stop.prevent="moveHandle"></view>
		<view class="rules-popup" :class="{ active: rulesShow }" @touchmove.stop.prevent="moveHandle">
			<view class="popup-top acea-row row-center-wrapper">
				<view class="title">抽奖规则</view>
				<view class="">
					<text class="iconfont"></text>
				</view>
			</view>
			<scroll-view scroll-y="true" class="popup-center">
				<view v-html="htmlData"></view>
			</scroll-view>
			<view class="popup-bottom">
				<view class="button acea-row row-center-wrapper" @click="rulesShow = false">我知道了</view>
			</view>
		</view>
		<!-- 抽奖结果弹窗 -->
		<lotteryAleart :aleartStatus="aleartStatus" @close="closeLottery" :alData="alData" :aleartType="aleartType">
		</lotteryAleart>
		<!-- #ifdef H5 -->
		<view class="share-box" v-if="H5ShareBox">
			<image :src="imgHost + '/statics/images/share-info.png'" @click="H5ShareBox = false"></image>
		</view>
		<!-- #endif -->
	</view>
</template>

<script>
	import {
		getLotteryData,
		startLottery,
		receiveLottery,
	} from '@/api/lottery.js';
	import {
		HTTP_REQUEST_URL
	} from '@/config/app';
	import noticeBar from '../components/noticeBar.vue';
	import lotteryAleart from '../../components/lotteryAleart/index.vue';
	export default {
		components: {
			noticeBar,
			lotteryAleart,
		},
		data() {
			return {
				imgHost: HTTP_REQUEST_URL,
				wr7s: false,
				userList: [],
				myList: [],
				rulesShow: false,
				rotateAngle: 0,
				angleList: [],
				prizeList: [],
				winingIndex: 0,
				lottery_num: 0,
				id: 0,
				type: '1',
				aleartStatus: false,
				addressModel: false,
				H5ShareBox: false,
				aleartType: 0,
				alData: {},
				htmlData: '',
				factor: 0,
			}
		},
		computed: {},
		onLoad() {
			for (let i = 0; i < 8; i++) {
				const angle = -(i * 45 + (45 / 2));
				this.angleList.push(angle)
			}
			this.getLotteryData(this.type)
		},
		methods: {
			getLotteryData(type) {
				uni.showLoading({
					title: '获取抽奖信息'
				});
				getLotteryData(type).then(res => {
					uni.hideLoading();
					console.log(res)
					let lottery = res.data.lottery;
					this.id = res.data.lottery.id;
					this.prizeList = lottery.prize;
					this.lottery_num = res.data.lottery_num;
					this.userList = res.data.all_record;
					this.myList = res.data.user_record;
					this.htmlData = res.data.lottery.content;
					this.factor = res.data.lottery.factor;
				}).catch(err => {
					uni.hideLoading();
					// this.lotteryShow = false
					// this.loading = true
					this.$util.Tips({
						title: err
					});
				})
			},
			getWiningIndex() {
				let that = this
				startLottery({
					id: this.id,
					type: this.type
				}).then(res => {
					// if (res.data.code === 'subscribe') {
					// 	that.$set(that, 'followCode', true);
					// 	this.codeSrc = res.data.url
					// 	return;
					// }
					this.alData = res.data;
					let winingIndex = this.prizeList.findIndex(item => {
						return item.id == this.alData.id;
					});
					this.winingIndex = winingIndex;
					this.rotating();
				}).catch(err => {
					this.$util.Tips({
						title: err
					});
				})
			},
			random(min, max) {
				return parseInt(Math.random() * (max - min + 1) + min)
			},
			rotating() {
				const config = {
					duration: 5000,
					circle: 8,
					mode: "ease-in-out"
				}
				// 计算角度
				const angle =
					// 初始角度
					this.rotateAngle +
					// 多旋转的圈数
					config.circle * 360 +
					// 奖项的角度
					this.angleList[this.winingIndex] -
					(this.rotateAngle % 360);
				this.rotateAngle = angle;
				// 旋转结束后
				setTimeout(() => {
					// isRotating = false;
					this.luck_draw_finish();
				}, config.duration + 500);
			},
			// 抽奖完成
			luck_draw_finish(param) {
				this.aleartType = 2
				this.aleartStatus = true
			},
			closeLottery(status) {
				this.aleartStatus = false;
				this.getLotteryData(this.type);
			},
			moveHandle() {}
		},
	}
</script>

<style lang="scss" scoped>
	.lucky-wheel {
		.header {
			padding: 406rpx 0 16rpx;
			background-image: url();
			background-repeat: no-repeat;
			background-size: 100% 100%;
		}

		.rules-button {
			position: absolute;
			top: 214rpx;
			right: 0;
			width: 52rpx;
			padding: 10rpx 15rpx;
			border-radius: 16rpx 0 0 16rpx;
			background: linear-gradient(180deg, #FCF2DC 0%, #F5D494 100%);
			font-weight: 500;
			font-size: 22rpx;
			line-height: 30rpx;
			color: #E93323;
		}

		.winning-tips-list {
			width: 488rpx;
			height: 40rpx;
			margin: 0 auto;
			text-align: center;
			line-height: 40rpx;

			.inner {
				width: 488rpx;
				height: 40rpx;
				background: linear-gradient(270deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.85) 49%, rgba(255, 255, 255, 0) 100%);
			}

			/deep/.marquee-item {
				font-size: 20rpx;
				color: #E93323;

				.name {
					color: #E93323;
				}
			}
		}

		.wheel-container {
			position: relative;
			width: 504rpx;
			height: 504rpx;
			border-radius: 50%;
			margin: 82rpx auto 0;
			overflow: hidden;
		}

		.wheel-prize {
			position: absolute;
			width: 100%;
			height: 100%;
			transition: transform 5000ms ease-in-out;

			.item {
				position: absolute;
				top: 0;
				left: 50%;
				width: 25%;
				height: 50%;
				padding-top: 24rpx;
				transform-origin: 0% 100%;
				text-align: center;
				font-weight: 500;
				font-size: 24rpx;
				line-height: 34rpx;
				color: #E93323;

				.image {
					display: block;
					width: 48rpx;
					height: 48rpx;
					margin: 24rpx auto 0;
				}
			}
		}

		.wheel-panel {
			position: absolute;
			width: 100%;
			height: 100%;
			transition: transform 5000ms ease-in-out;

			.item {
				position: absolute;
				top: 0;
				left: 50%;
				width: 50%;
				height: 50%;
				background: linear-gradient(242deg, #FFF9D7 0%, #FFF7BC 100%);
				transform-origin: 0% 100%;

				&:nth-child(even) {
					background: linear-gradient(239deg, #FFCE9B 0%, #FFB764 100%);
				}
			}
		}

		.wheel-point {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);

			.draw-button {
				width: 212rpx;
				height: 276rpx;
				margin-top: -64rpx;
				background-image: url();
				background-repeat: no-repeat;
				background-size: 100% 100%;
			}
		}

		.number-wrapper {
			margin: 222rpx 0 0;
			text-align: center;
			font-weight: 600;
			font-size: 32rpx;
			line-height: 56rpx;
			color: rgba(255, 255, 255, 0.9);
		}

		.number {
			color: #FFD68E;
		}

		.share-button-wrapper {
			width: 588rpx;
			height: 110rpx;
			margin: 12rpx auto 0;
		}

		.share-button {
			width: 588rpx;
			height: 110rpx;
			padding: 8rpx 0 24rpx;
			background-image: url();
			background-repeat: no-repeat;
			background-size: 100% 100%;
			font-weight: 500;
			font-size: 32rpx;
			color: #E93323;
		}
	}

	.main-wrapper {
		padding: 38rpx 20rpx;
		background-color: #FF3433;
		background-image: url();
		background-repeat: no-repeat;
		background-size: 100%;
	}

	.record-wrapper {
		.wrapper-header {
			padding: 42rpx 0 40rpx;

			.title {
				padding: 0 74rpx;
				background-image: url(),
					url();
				background-position: left center, right center;
				background-repeat: no-repeat;
				background-size: 54rpx 24rpx;
				font-weight: 700;
				font-size: 36rpx;
				line-height: 36rpx;
				color: rgba(255, 254, 239, 0.90);
			}
		}

		.wrapper-main {
			height: 352rpx;
			padding: 44rpx 60rpx 0;
			background-image: url();
			background-repeat: no-repeat;
			background-size: 100% 100%;

			.item {
				padding-left: 42rpx;
				margin-bottom: 34rpx;
				background-image: url();
				background-position: left center;
				background-repeat: no-repeat;
				background-size: 32rpx 29rpx;
				font-size: 24rpx;
				line-height: 34rpx;
				color: #333333;
			}

			.mark {
				color: #E93323;
			}
		}
	}

	.prize-wrapper {
		margin-top: 60rpx;

		&.mine .wrapper-header .title-box {
			background-image: url();
		}

		&.mine .wrapper-main {
			.list {
				margin-right: 0;
			}

			.item {
				margin: 0 0 32rpx;
				text-align: left;
				font-size: 24rpx;
				line-height: 34rpx;

				&.th {
					font-weight: 500;
					font-size: 28rpx;
					line-height: 40rpx;
				}
			}

			.mark {
				width: 152rpx;
				padding-left: 8rpx;
			}

			.time {
				width: 266rpx;
			}
		}

		.wrapper-header {
			padding-right: 32rpx;
			background-image: url();
			background-position: left 8rpx;
			background-repeat: no-repeat;
			background-size: 100% 100%;

			.title-box {
				padding: 48rpx 0 54rpx 32rpx;
				background-image: url();
				background-position: right top;
				background-repeat: no-repeat;
				background-size: 114rpx 114rpx;
			}

			.title {
				padding: 0 74rpx;
				background-image: url(),
					url();
				background-position: left center, right center;
				background-repeat: no-repeat;
				background-size: 54rpx 24rpx;
				font-weight: 700;
				font-size: 36rpx;
				line-height: 36rpx;
				color: #E93323;
			}
		}

		.wrapper-main {
			padding: 6rpx 32rpx 8rpx;
			border-radius: 0 0 32rpx 32rpx;
			background-color: #FFF3E2;

			.list {
				margin-right: -35rpx;
			}

			.item {
				margin: 0 35rpx 30rpx 0;
				text-align: center;
				font-size: 26rpx;
				line-height: 36rpx;
				color: #333333;
			}

			.image-wrap {
				width: 192rpx;
				height: 192rpx;
				border: 4rpx dashed #FFB87E;
				border-radius: 24rpx;
				margin-bottom: 20rpx;
				background: #FFFFFF;
			}

			.image {
				width: 100%;
				height: 100%;
				border-radius: 24rpx;
				object-fit: contain;
			}
		}
	}

	.rules-popup {
		position: fixed;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 1001;
		border-radius: 32rpx 32rpx 0 0;
		background-color: #FFFFFF;
		transform: translateY(100%);
		transition: 0.3s;

		&.active {
			transform: translateY(0);
		}

		&::before {
			content: "";
			position: absolute;
			width: 100%;
			height: 280rpx;
			background: linear-gradient(rgba(233, 51, 35, 0.20), rgba(255, 255, 255, 0));
		}

		.popup-top {
			position: relative;
			height: 108rpx;

			.title {
				font-weight: 500;
				font-size: 32rpx;
				color: #333333;
			}
		}

		.popup-center {
			height: 972rpx;
			padding: 0 32rpx;
		}

		.popup-bottom {
			padding: 20rpx;

			.button {
				height: 72rpx;
				border-radius: 36rpx;
				background-color: #E93323;
				font-weight: 500;
				font-size: 26rpx;
				color: #FFFFFF;
			}
		}
	}

	.share-box {
		z-index: 1300;
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;

		image {
			width: 100%;
			height: 100%;
		}
	}
</style>